<template>
  <section class="order-detail-footer">
    <div class="distribution">
      <h4>配送信息</h4>
      <ul>
        <li>
          <span>送达时间：</span>
          <span class="desc">{{ snapshot.deliver_time }}</span>
        </li>
        <li>
          <span>送货地址：</span>
          <span class="desc">
            <i>{{ snapshot.consignee }}</i>
            <i>{{ snapshot.phone }}</i>
          </span>
        </li>
        <li>
          <span>配送方式：</span>
          <span>蜂鸟专送</span>
        </li>
      </ul>
    </div>
    <div class="order">
      <h4>订单信息</h4>
      <ul v-if="snapshot._doc">
        <li>
          <span>订单号：</span>
          <span class="desc">{{ snapshot._doc.id }}</span>
        </li>
        <li>
          <span>支付方式：</span>
          <span class="desc">
            <i>{{ snapshot.pay_method }}</i>
          </span>
        </li>
        <li>
          <span>下单时间：</span>
          <span>{{ snapshot._doc.formatted_created_at }}</span>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    snapshot: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style lang="less" scoped>
.order-detail-footer {
  font-size: 15px;
  .distribution,
  .order {
    background-color: #fff;
    h4 {
      border-bottom: 1px solid #eaeaea;
      font-size: 16px;
    }
    h4,
    ul li {
      padding: 15px 10px;
      display: flex;
      .desc {
        flex: 1;
        i {
          display: block;
        }
      }
    }
  }
  .distribution {
    margin-bottom: 10px;
  }
}
</style>